<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script>
        // JS 计时器是一个周期性的执行方法
        // JS计时器分为单周期方法 setTimeout() , 重复周期方法 setInterval()
        // 只执行一次的计时器
        // setTimeout(callback,milliTime)
        // console.log("->")
        // let timer1 = setTimeout(function (){
        //     console.log("setTimeout-2s延迟后执行的回调方法")
        // },2000)
        // console.log("<-")
        // // timer1 是计时器控制对象，可用 clearTimeout( timer1 ) 关闭计时器
        // // 通过 console.log 输出或者字符串拼接运算时，计时器对象会输出数值
        // console.log(timer1)


        console.log("---->")
        // 周期循环执行回调
        let timer2 = setInterval(function (){
            console.log("setInterval-2s延迟后执行的回调方法")
        },2000)
        console.log("<----")
        // timer2 是计时器控制对象，可用 clearInterval( timer2 ) 关闭计时器
        // 通过 console.log 输出或者字符串拼接运算时，计时器对象会输出数值
        console.log(timer2)

        function closeTime(){
            clearInterval(timer2)
        }
    </script>
</head>
<body>
<input type="button" value="关闭计时器" onclick="closeTime()">
</body>
</html>